<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>万仙境 · 旧世版</title>
    <!-- 本地加载，无需网络 -->
    <script src="lib/three.min.js"></script>
    <script src="lib/GLTFLoader.js"></script>
    <style>
        body { margin: 0; overflow: hidden; background: #000; }
        canvas { display: block; }
        #loading {
            position: fixed;
            top: 20px;
            left: 20px;
            color: #0f0;
            font-family: monospace;
            background: rgba(0,0,0,0.8);
            padding: 10px;
            border: 1px solid #0f0;
            z-index: 100;
            font-size: 14px;
        }
    </style>
</head>
<body>

    <div id="loading">旧世重启中...</div>

    <script>
        // ✅ THREE 已全局可用
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x0a1a2a);

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 2, 5);

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 光照
        scene.add(new THREE.AmbientLight(0x404040));
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(1, 1, 1).normalize();
        scene.add(light);

        // 网格
        const grid = new THREE.GridHelper(10, 10);
        scene.add(grid);

        // 坐标轴
        const axes = new THREE.AxesHelper(5);
        scene.add(axes);

        // ✅ GLTFLoader 已全局可用
        const loader = new THREE.GLTFLoader();
        loader.load(
            'worlds/mochen_cave.glb',
            (gltf) => {
                scene.add(gltf.scene);
                document.getElementById('loading').textContent = '万仙境已显现 ✅';
                console.log('🎉 模型加载成功', gltf);
            },
            (progress) => {
                const percent = Math.round(progress.loaded / progress.total * 100);
                document.getElementById('loading').textContent = `加载中... ${percent}%`;
            },
            (error) => {
                document.getElementById('loading').textContent = `❌ 加载失败: ${error.message}`;
                console.error('加载失败', error);
            }
        );

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();

        // 自适应
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>

</body>
</html>